/*
 * @Author: Yaphet_peng
 * @Date:   2015-08-12 23:38:13
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 13:24:20
 */

'use strict';

(function() {

    var Y = window.Y || {}



    Y.chart_pie_crm_detail = function(setting) {

            document.querySelector(setting.selector).innerHTML = ''
            var selector = setting.selector,
                series = setting.series,
                colorset = setting.colorset,
                radius = setting.radius,
                margin = setting.margin,
                colorset = setting.colorset,
                valueStyle = setting.valueStyle,
                width = document.querySelector(selector).offsetWidth,
                height = document.querySelector(selector).offsetHeight,
                textStyle = setting.textStyle,
                tickValues = []

            for (var i = 0, len = series.length; i < len; i++) {

                tickValues.push(series[i].name)
            }

            var svg = d3.select(selector)
                .append('svg')
                .attr('width', width)
                .attr('height', height)

            var xScale = d3.scale.ordinal()
                .domain(tickValues)
                .rangeBands([0, width - margin.left - margin.right], 0.6)

            var yScale = d3.scale.linear()
                .domain([-10, d3.max(series, function(d) {

                    return (d['value']) + 50
                })])
                .range([0, height - margin.top - margin.bottom])

            var xAxis = d3.svg.axis()
                .scale(xScale)
                .tickValues(tickValues)
                .orient('bottom')
                .tickSize(6, 0)

            svg.append('g')
                .attr('class', 'xAxis')
                .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom) + ')')
                .call(xAxis)

            svg.select('.xAxis').selectAll('path')
                .attr('fill', 'none')
                .attr('stroke', '#CCD4D4')
                .attr('stroke-width', 1)

            svg.select('.xAxis').selectAll('text')
                .style('font-size', textStyle.fontSize)
                .style('fill', textStyle.color)
                .style('font-weight', textStyle.fontWeight)

            var con = svg.append('g')
                .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom) + ')')

            con.selectAll('.line')
                .data(series)
                .enter()
                .append('line')
                .attr('class', 'line')
                .attr({
                    x1: function(d, i) {

                        return xScale(d['name'])
                    },
                    y1: 0,
                    x2: function(d, i) {

                        return xScale(d['name'])
                    },
                    y2: function(d, i) {

                        return -yScale(d['value'])
                    }
                })
                .attr('stroke', colorset[0])
                .attr('stroke-width', 1)






            con.selectAll('.tran')
                .data(series)
                .enter()
                .append('polygon')
                .attr('class', 'tran')
                .attr("points", function(d, i) {

                    /*return "20,10 30,20 10,25"*/
                    var x1 = xScale(d['name']),
                        y1 = -yScale(d['value']),
                        x2 = xScale(d['name']) - 10,
                        y2 = -yScale(d['value']) - 20,
                        x3 = xScale(d['name']) + 10,
                        y3 = -yScale(d['value']) - 20

                    return (x1 + ',' + y1 + ' ' + x2 + ',' + y2 + ' ' + x3 + ',' + y3)
                })
                .attr("fill", colorset[0])

            con.selectAll('.circle')
                .data(series)
                .enter()
                .append('circle')
                .attr("class", 'circle')
                .attr({

                    cx: function(d, i) {

                        return xScale(d['name'])
                    },
                    cy: function(d, i) {

                        return -yScale(d['value']) - 22
                    },
                    r: 15
                })
                .attr('stroke', colorset[0])
                .attr('stroke-width', 1)
                .attr('fill', '#fff')

            con.selectAll('.text')
                .data(series)
                .enter()
                .append('text')
                .attr('class', 'text')
                .attr({

                    x: function(d, i) {

                        return xScale(d['name'])
                    },
                    y: function(d, i) {

                        return -yScale(d['value']) - 22
                    }
                })
                .attr('text-anchor', 'middle')
                .attr('dy', '0.35em')
                .text(function(d, i) {

                    return d['value']
                })
                .style('fill', valueStyle.color)
                .style('font-size', valueStyle.fontSize)
                .style('font-weight', valueStyle.fontWeight)

            con.selectAll("image")
                .data(series)
                .enter()
                .append("image")
                .attr("x", function(d, i) {
                    return xScale(d['name'])-12
                })
                .attr("y", -12)
                .attr("width", 25)
                .attr("height", 25)
                .attr("xlink:href", function(d, i) {
                    return "/resources/app/images/" + d['icon']
                })


        }
        // use


    window.Y = Y

}())
